<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">{{operation | translate}}(ID:{{windfarm.id}})</h4>
    </div>
    <div class="modal-body">
        <form role="form" name="form_windfarm" novalidate class="form-horizontal">
            <div class="form-group"><label class="col-sm-2 control-label">{{'SETTING.NAME' | translate}}</label>
              <div class="col-sm-10">
                  <input ng-model="windfarm.name" type="text" name="windfarmname" class="form-control" required>
                  <div class="m-t-xs" ng-show="form_windfarm.windfarmname.$invalid && form_windfarm.windfarmname.$dirty">
                      <small class="text-danger" ng-show="form_windfarm.windfarmname.$error.required">{{'SETTING.INPUT_NAME' | translate}}</small>
                  </div>
              </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'WIND_FARM.ADDRESS' | translate}}</label>
              <div class="col-sm-10">
                  <input ng-model="windfarm.address" type="text" name="windfarmaddress" class="form-control" required>
                  <div class="m-t-xs" ng-show="form_windfarm.windfarmaddress.$invalid && form_windfarm.windfarmaddress.$dirty">
                      <small class="text-danger" ng-show="form_windfarm.windfarmaddress.$error.required">{{'WIND_FARM.INPUT_ADDRESS' | translate}}</small>
                  </div>
              </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'WIND_FARM.POSTAL_CODE' | translate}}</label>
                <div class="col-sm-10">
                    <input ng-model="windfarm.postal_code" type="text" name="windfarmpostal_code" class="form-control" required>
                    <div class="m-t-xs" ng-show="form_windfarm.windfarmpostal_code.$invalid && form_windfarm.windfarmpostal_code.$dirty">
                        <small class="text-danger" ng-show="form_windfarm.windfarmpostal_code.$error.required">{{'WIND_FARM.INPUT_POSTAL_CODE' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">{{'WIND_FARM.GET_COORDINATE' | translate}}</label>
                <div class="col-sm-10">
                    <a class="btn btn-primary btn-rounded btn-outline" href="https://docs.mapbox.com/playground/geocoding-v6/" target="_blank">Mapbox</a>
                    <a class="btn btn-primary btn-rounded btn-outline" href="https://www.google.com/maps" target="_blank">Google Maps</a>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'WIND_FARM.LATITUDE' | translate}}</label>
                <div class="col-sm-10">
                    <input ng-model="windfarm.latitude" type="number" name="windfarmlatitude" class="form-control" required>
                    <div class="m-t-xs" ng-show="form_windfarm.windfarmlatitude.$invalid && form_windfarm.windfarmlatitude.$dirty">
                        <small class="text-danger" ng-show="form_windfarm.windfarmlatitude.$error.required">{{'WIND_FARM.INPUT_LATITUDE' | translate}}</small>
                        <small class="text-danger" ng-show="form_windfarm.windfarmlatitude.$error">{{'SETTING.INVALID_FORMAT' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'WIND_FARM.LONGITUDE' | translate}}</label>
                <div class="col-sm-10">
                    <input ng-model="windfarm.longitude" type="number" name="windfarmlatitude" class="form-control" required>
                    <div class="m-t-xs" ng-show="form_windfarm.windfarmlongitude.$invalid && form_windfarm.windfarmlongitude.$dirty">
                        <small class="text-danger" ng-show="form_windfarm.windfarmlongitude.$error.required">{{'WIND_FARM.INPUT_LONGITUDE' | translate}}</small>
                        <small class="text-danger" ng-show="form_windfarm.windfarmlongitude.$error">{{'SETTING.INVALID_FORMAT' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'WIND_FARM.RATED_POWER' | translate}}(kW)</label>
                <div class="col-sm-10">
                    <input ng-model="windfarm.rated_power" type="number" name="windfarmrated_power" class="form-control" required>
                    <div class="m-t-xs" ng-show="form_windfarm.windfarmrated_power.$invalid && form_windfarm.windfarmrated_power.$dirty">
                        <small class="text-danger" ng-show="form_windfarm.windfarmrated_power.$error.required">{{'WIND_FARM.INPUT_RATED_POWER' | translate}}</small>
                        <small class="text-danger" ng-show="form_windfarm.windfarmrated_power.$error">{{'SETTING.INVALID_FORMAT' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'SETTING.CONTACT' | translate}}</label>
                <div class="col-sm-10">
                    <ui-select ng-model="windfarm.contact.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="contact.id as contact in contacts | filter: $select.search">
                            <div ng-bind-html="contact.name | highlight: $select.search"></div>
                            <small>{{contact.email}},{{contact.phone}}</small>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_windfarm.windfarmcontact.$invalid && form_windfarm.windfarmcontact.$dirty">
                        <small class="text-danger" ng-show="form_windfarm.windfarmcontact.$error.required">{{'SETTING.SELECT_CONTACT' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'SETTING.COSTCENTER' | translate}}</label>
                <div class="col-sm-10">
                    <ui-select ng-model="windfarm.cost_center.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="costcenter.id as costcenter in costcenters | filter: $select.search">
                            <div ng-bind-html="costcenter.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">{{'WIND_FARM.SVG' | translate}}</label>
                <div class="col-sm-10">
                    <ui-select ng-model="windfarm.svg.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                            <div ng-bind-html="svg.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">{{'SETTING.DESCRIPTION' | translate}} ({{'SETTING.OPTIONAL' | translate}})</label>
              <div class="col-sm-10">
                  <input ng-model="windfarm.description" type="text" name="windfarmdescription" class="form-control">
              </div>
            </div>
            <div class="form-group" ng-show="windfarm.qrcode"><label class="col-sm-2 control-label">{{'COMMON.QR_CODE' | translate}} </label>
             <div class="col-sm-10">
                  <div>
                       <qrcode data="{{windfarm.qrcode}}" version="1" error-correction-level="L" size="100" color="#fff" background="#000" download></qrcode>
                  </div>
              </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">{{'SETTING.CANCEL' | translate}}</button>
        <button type="button" ng-disabled="form_windfarm.$invalid" class="btn btn-primary" ng-click="ok()">{{'SETTING.SAVE' | translate}}</button>
    </div>
</div>
